<template>
  <div>
    <el-card>
      <!-- 表单 -->
      <el-form label-width="100px" class="demo-ruleForm">
        <el-form-item width label="标签名称" prop="LabelName">
          <div class="item-catalogue">
            <el-input v-model="LabelName" class="catalogue" />
          </div>
        </el-form-item>
        <el-form-item label="状态" prop="name">
          <el-select v-model="stateList.value" placeholder="请选择">
            <el-option
              v-for="item in stateList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
            <span />
          </el-select>
          <!-- <el-button @click="LabelName=''">清除</el-button>
          <el-button type="primary" @click="onSearchClick">搜索</el-button> -->
        </el-form-item>
        <div class="searchBtn">
          <el-button @click="clearClick">清除</el-button>
          <el-button type="primary" @click="onSearchClick">搜索</el-button>
          <div class="backtosubject">
            <el-button class="addMenus" type="success" icon="el-icon-edit" @click="onAddCatalog">新增目录</el-button>
          </div>
        </div>
      </el-form>
      <div class="alert">
        <el-alert type="info" :title="`一共有${total}条记录`" show-icon />
      </div>

      <el-table :data="labelList" stripe style="width: 100%">
        <el-table-column prop="date" label="序号" type="index" width="100" />
        <el-table-column prop="subjectName" label="所属学科" width="100" />
        <el-table-column prop="tagName" label="标签名称" />
        <el-table-column prop="username" label="创建者" />
        <el-table-column prop="addDate" label="创建日期">
          <template v-slot="{row}">
            {{ row.addDate | formatDate }}
          </template>
        </el-table-column>

        <el-table-column prop="state" label="状态">
          <template v-slot="{row}">
            <div>{{ row.state===0?'已禁用':'已启用' }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template v-slot="{row}">
            <el-button
              type="text"
              size="mini"
              @click="onStateClick(row)"
            >{{ row.state===1?'禁用':'启用' }}</el-button>
            <el-button
              type="text"
              size="mini"
              :disabled="row.state===1?false:true"
              @click="UpdateLabel(row)"
            >修改</el-button>
            <el-button
              type="text"
              size="mini"
              :disabled="row.state===1?false:true"
              @click="onDeleteClick(row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 增加目录弹窗 -->
    <LabelDialog
      :update-list="updateList"
      :label-table-list="subList"
      :label-i-d="LabelID"
      :add-visible.sync="addVisible"
      @updateLabelList="updateLabelList"
    />
  </div>
</template>

<script>
import { getSubjectListAPI, StateDirectoryAPI, DeletelabelTagsAPI, SearchDirectoryAPI, labelTagsAPI } from '@/api/index'
import LabelDialog from './LabelDialog'
export default {
  name: 'TableLayout',
  components: {
    LabelDialog
  },
  props: {
    labelList: {
			type: Array,
			default: () => {}
		},
    total: Number,
    page: Number,
    pagesize: Number

  },
  data() {
    return {
      activeNames: '',
      LabelName: '',
      totals: 0,
      subList: [],
      stateList: [
        {
          value: '1',
          label: '启用'
        }, {
          value: '0',
          label: '禁用'
        }
      ],
      addVisible: false,
      LabelID: '',
      state: true,
      searchList: [],
      updateList: {}
    }
  },
  created() {
    this.getSubject()
  },

  methods: {
    /**
     * 学科列表(用来展示弹窗中的下拉菜单)
     */
    async  getSubject() {
      const { items } = await getSubjectListAPI(this.page, this.pagesize)
      this.subList = items
      // console.log(items);

    },

    /**
     * 新增标签按钮
     */
    onAddCatalog() {
      this.addVisible = true


    },


    /**
     * 标签状态
     */
    async  onStateClick(row) {
      //  console.log(row.state);

      if (row.state === 1) {
        row.state = 0
        const res = await StateDirectoryAPI(row.id, row.state)
      } else {
        row.state = 1
        const res = await StateDirectoryAPI(row.id, row.state)
      }
    },

    /**
     * 删除
     */
    onDeleteClick(row) {
      this.$confirm('确定永久删除此标签？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async() => {
        const res = await DeletelabelTagsAPI(row.id)

        // 提示用户已经成功
        this.$message.success('你已成功删除')
        // 更新数据
        this.$emit('success')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      })
    },


    /**
     * 修改 点击事件
     */
    UpdateLabel(row) {
      this.addVisible = true
      this.updateList = row
      this.LabelID = row.id

    },


    /**
     * 点击搜索
     */
    async onSearchClick() {
			console.log(this.stateList.value);
      const { items } = await labelTagsAPI({
				page: this.page,
				pagesize: this.pagesize,
				tagName: this.LabelName,
				state: this.stateList.value
			})
      this.$emit('labelData', items)
    },
		// 点击清除，清空搜索框和下拉菜单
		clearClick() {
			this.LabelName = ''
			this.stateList.value = ''
		},
		updateLabelList() {
			this.$emit('updateLabelList')
		}
  }

}
</script>
<style lang='scss' scoped>
.catalogue {
  width: 35%;
}
::v-deep.item-catalogue {
  display: flex;
  justify-content: space-between;
}
.alert {
  margin-bottom: 20px;
}
.el-button--default {
  margin-left: 20px;
}
::v-deep .el-form-item{
	float: left;
	width: 300px;
}
::v-deep .item-catalogue{
	width: 200px;
	.el-input{
		width: 200px;
		height: 30px;
	}
}
.addMenus{
	float: right;
}
.backtosubject{
	float: right;
	height: 40px;
	line-height: 40px;
	cursor:pointer;
	color:blue
}
</style>

